<template>
  <div>
    <el-row class="border">
      <!-- 搜索 -->
      <el-input v-model="input" class="select-1" placeholder="课程名称" />
      <el-select
        v-model="value"
        class="dxk-12 select-1 select-padding"
        placeholder="请选择课程教练"
      >
        <el-option
          v-for="item in coach.coachList"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-button
        :plain="true"
        type="primary"
        class="dxk-12 button-left"
        @click="searchFind"
        >查询</el-button
      >
      <el-button class="button-text-color" type="primary">
        <router-link :to="'/mainView/AddLessons?flag=1'">添加团课</router-link>
      </el-button>
    </el-row>
    <!-- 表格 -->
    <el-row class="table-1">
      <el-table
        :data="
          state.tableData.slice(
            (state1.page - 1) * state1.pageSize,
            state1.page * state1.pageSize
          )
        "
        border="1"
        style="width: 100%"
        :header-cell-style="{ background: '#f9fafc', color: '#606266' }"
      >
        <el-table-column label="课程图片" width="160">
          <template #default="scope">
            <img
              :src="scope.row.imgUrls[0]"
              style="width: 100px; height: 60px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程名称" width="180" />
        <el-table-column prop="coachName" label="教练" />
        <el-table-column prop="id" label="排序" />
        <el-table-column prop="classTime" label="时长" />
        <el-table-column prop="maxPeople" label="可预约人数" />
        <el-table-column label="操作" width="120">
          <template #default="scoped">
            <el-button
              link
              type="primary"
              size="small"
              @click="deleteId(scoped.row.id)"
              >删除</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="editId(scoped.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="lessons-padding">
      <el-col :span="18"></el-col>
      <el-col :span="6">
        <el-pagination
          small
          background
          :page-size="5"
          layout="prev, pager, next"
          :total="state1.total"
          class="mt-4"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      /></el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import { getClassList, deleteClassList, findCoach } from "../../http/api";
import { ElMessage, ElMessageBox } from "element-plus";
import router from "../../router";

// 下拉选择器
const value = ref("");
// 输入框
const input = ref("");
// 教练id
let coachNameId = "";

// 分页
const state1 = reactive({
  pageSize: 5,
  page: 1,
  total: 3,
});
// 表格
var state = reactive({ tableData: [] });
var coach = reactive({ coachList: [] });
onMounted(() => {
  // 获取团课课程列表
  getClassList().then((res) => {
    console.log(res);
    if (res.code == 0) {
      state.tableData = res.data;
      state1.total = res.data.length;
    }
  });
  findCoach().then((res) => {
    if (res.code == 0) {
      coach.coachList = res.data;
    }
  });
});
// 根据课程名称和教练查询
const searchFind = () => {
  coach.coachList.forEach((el, index) => {
    if (el.name == value.value) {
      coachNameId = el.id;
    }
  });
  getClassList({ className: input.value, coachId: coachNameId }).then((res) => {
    if (res.code == 0) {
      ElMessage({
        message: "查询成功！.",
        type: "success",
      });
      state.tableData = res.data;
      state1.total = res.data.length;
    }
  });
};

// 当前页切换
const handleCurrentChange = (val) => {
  state1.page = val;
};
// 删除
const deleteId = (id) => {
  ElMessageBox.confirm("确定删除吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteClassList({ id: id }).then((res) => {
        if (res.code == 0) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getClassList().then((res) => {
            state.tableData = res.data;
            state1.total = res.data.length;
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除失败",
      });
    });
};
// 编辑
const editId = (id) => {
  router.push({
    path: "/mainView/AddLessons",
    query: { flag: 2, zid: id },
  });
};
</script>

<style scoped>
.select-1 {
  width: 180px !important;
  height: 32px !important;
}
.select-padding {
  padding: 0 4px;
}
.table-1 {
  padding: 10px 0;
}
.button-left {
  margin-left: 10px;
  width: 86px !important;
  background-color: #409eff;
  color: white;
}
.button-text-color a {
  color: white;
  text-decoration: none;
}
.button-text-color {
  background-color: #409eff;
}
.el-table th.el-table__cell {
  background-color: aqua !important;
}
.border {
  padding: 10px;
  border-radius: 5px;
  background-color: #ecf5ff;
  border: 1px solid #cccccc;
}
.el-table th.el-table__cell {
  background-color: #409eff;
}
</style>
